<template>
  <div class='container'>
    <el-card>
     <el-row class='top'>
      <el-col :span='16'>
        <span>学科名称</span>
        <el-input class='inputtop' v-model.trim="input" placeholder="请输入内容" />
        <el-button @click="searchnull" size='medium'>清除</el-button>
        <el-button type="primary" size='medium' @click='search'>搜索</el-button>
      </el-col>
      <el-col :span='7'>
        <el-button type="success" icon="el-icon-edit" size='small' @click='dialogVisible = true'>新增学科</el-button>
      </el-col>
     </el-row>

     <el-alert :title="'数据一共' + counts + '条'" type="info" show-icon></el-alert>

     <!-- 表格 -->
      <el-table :data="subjects">
        <el-table-column type='index' label="序号" >
        </el-table-column>
        <el-table-column width='90' property="subjectName" label="学科名称" >
        </el-table-column>
        <el-table-column property="username" label="创建者" >
        </el-table-column>
        <el-table-column width='150' property="addDate" label="创建日期" >
          <template slot-scope='scope'>
            {{scope.row.addDate | parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column property="isFrontDisplay" label="前台是否显示" >
        </el-table-column>
        <el-table-column  property="twoLevelDirectory" label="二级目录" >
        </el-table-column>
        <el-table-column property="tags" label="标签" >
        </el-table-column>
        <el-table-column property="totals" label="题目数量" >
        </el-table-column>
        <el-table-column width='210' label="操作" >
         <template slot-scope="scope">
          <el-button type="text" size="mini" @click='subjectsort(scope.row)'>学科分类</el-button>
          <el-button type="text" size="mini" @click='subjecttags(scope.row)'>学科标签</el-button>
          <el-button type="text" size="mini" @click='subchange(scope.row)'>修改</el-button>
          <el-button type="text" size="mini" @click='subdelete(scope.row)'>删除</el-button>
         </template>
        </el-table-column>
      </el-table> 
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-size=pagesize
        layout="prev, pager, next, jumper"
        :total="counts">
      </el-pagination>

      <!-- 增加学科弹框 -->
      <el-dialog
        title="增加学科"
        :visible.sync="dialogVisible"
        width="40%">
        <el-form ref="form" :model="form" :rules='rules' label-width="80px">
          <el-form-item label="学科名称" prop='subject'>
            <el-input v-model="form.subject"></el-input>
          </el-form-item>
        </el-form>
          <span>是否显示</span>
          <el-switch
            v-model="value1"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addsubject">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 学科修改弹框 -->
      <el-dialog
        title="修改学科"
        :visible.sync="subjectchange"
        width="40%">
        <el-form ref="form" :model="form" :rules='rules' label-width="80px">
          <el-form-item label="修改学科" prop='changesubject'>
            <el-input v-model="form.changesubject"></el-input>
          </el-form-item>
        </el-form>
          <span>是否显示</span>
          <el-switch
            v-model="value1"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        <span slot="footer" class="dialog-footer">
          <el-button @click="subjectchange = false">取 消</el-button>
          <el-button type="primary" @click="changesubject">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, add, update, detail, remove } from '@/api/hmmm/subjects'
// import { parseTime } from '@/utils/index'

export default {
  data () {
    return {
      value1: true,
      input: '', // 输入框内容
      subjects: [], //学科列表
      page: 1, // 当前页面
      pagesize: 10, // 每页的数据
      counts: 0, // 总数据数量
      dialogVisible: false,
      subjectchange: false, // 学科修改
      changeId: '',
      form: {
        subject: '',
        changesubject:''
      },
      rules: {
        subject: [
          { required: true, message: '请输入学科名称', trigger: 'blur' },
          { min: 3, message: '长度大于3个字符', trigger: 'blur' }
        ],
        changesubject: [
          { required: true, message: '请输入学科名称', trigger: 'blur' },
          { min: 3, message: '长度大于3个字符', trigger: 'blur' }
        ]
      },
    }
  },
  created () {
    this.getSubject()
  },
  // filters: {
  //   format: function(data){
  //     parseTime(data, 'yyyy-mm-dd hh:ii:ss')
  //   }
  // },
  methods: {
    async getSubject () {
      const { data } = await list({
      subjectName: this.input,
      page: this.page,
      pagesize: this.pagesize
      })
      this.subjects = data.items
      this.counts = data.counts
      // console.log(data)
      // console.log(data.items)
    },
    handleCurrentChange (val) {
      // console.log(val)
      this.page = val
      this.getSubject()
    },
    handleSizeChange (val) {
      this.pagesize = val
      this.getSubject()
    },
    // 搜索
    search () {
      // subjectName
      this.getSubject()
    },
    // 清空
    searchnull () {
      this.input = null
      this.getSubject()
    },
    // 学科标签跳转
    subjecttags (row) {
      // console.log(row)
      this.$router.push({
        path: '/subjects/tags',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    // 学科分类跳转
    subjectsort (row) {
       this.$router.push({
        path: '/subjects/directorys',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    // 修改学科
    async subchange (row) {
      this.subjectchange = true
      const { data } = await detail({
        id: row.id})
        this.form.changesubject = data.subjectName
        this.changeId = data.id
        data.isFrontDisplay = 1? this.value1 = true : this.value1 = false
      // console.log(data)
      // console.log(row)
    },
    // 弹框 确认修改学科
    changesubject () {
      this.$refs.form.validate( valid => {
        if (valid) {
          let isFrontDisplay 
          this.value1? isFrontDisplay = '1' : isFrontDisplay = '0'
          // console.log(isFrontDisplay )
          update({
            id: this.changeId,
            subjectName: this.form.changesubject,
            isFrontDisplay: isFrontDisplay
          })
          this.subjectchange = false
          this.getSubject()
          this.$message('修改成功')
        } else {
          this.$message('修改失败')
        }
      })
    },
    // 弹框 添加学科
    addsubject () {
      this.$refs.form.validate(async valid => {
        if (valid) {
          let isFrontDisplay 
          this.value1? isFrontDisplay = '1' : isFrontDisplay = '0'
          // console.log(isFrontDisplay )
         const { data } =  await add({
            subjectName: this.form.subject,
            isFrontDisplay: isFrontDisplay
          })
          this.dialogVisible = false
          this.getSubject()
          // console.log(data)
        } else {
          return false;
        }
      })
    },
    // 删除学科
    async subdelete (row) {
      const res = await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // console.log(res)
      if (res !== 'confirm') return this.$message.info('已取消删除')
      remove({ id: row.id})
      this.$message.success('删除成功')
      this.getSubject()
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  .top {
    margin-bottom: 20px;
    .el-col-16 {
      .el-input {
      width: 300px;
      margin: 0 10px;
      }
      span {
        color: gray;
        font-size: 15px;
      }
    }
    .el-col-7 {
      position: relative;
      .el-button--success {
        position: absolute;
        right: -38px;
      }
    }
  }
  .el-alert {
    margin-bottom: 20px;
  }
  .el-table {
    .el-table__body-wrapper {
      .cell {
        width: 100px !important;
      }
    }
  }
  .el-pagination {
    text-align: right;
  }
  span {
    margin: 0 10px;
  }
}
</style>
